<html>
<head>
    <meta charset="utf-8">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <style>
        form input{width: 100%}
        form div{text-align: right}
        form span{color: red}
    </style>
</head>
<body>
<div id="app">
    <h1>表单验证</h1>
    <form style="display: grid; grid-template-columns: 60px 150px auto; gap:10px">
        账号:<input v-model="user.name"><span>{{errors.name}}</span>
        密码:<input v-model="user.pwd" type="password"><span>{{errors.pwd}}</span>
        电话:<input v-model="user.phone" type="number"><span>{{errors.phone}}</span>
        邮箱:<input v-model="user.email" type="email"><span>{{errors.email}}</span>
        工资:<input v-model="user.money" type="number"><span>{{errors.money}}</span>
        身份证:<input v-model="user.idCard"><span>{{errors.idCard}}</span>
        生日:<input v-model="user.birthday" type="date"><span>{{errors.birthday}}</span>
        头像:<div>
                <img :src="user.head" alt=""
                     style="width: 100px; height: 100px; border: 1px solid #333; object-fit: cover"
                    onclick="fileinput.click()">
                <input type="file" style="display: none;" @change="uploadFile" id="fileinput" accept="image/*">
            </div>
        <b></b><div><button @click.prevent="reg">提交</button></div>
    </form>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data :{
            user:{name:"",pwd:"",phone:"",email:"",money:0,idCard:"", head:""},
            errors:{},
        },
        methods: {
            reg(){
                // 全部数据写在地址中: /user/reg?name=xx&pwd=yy..
                // 有丢失数据的风险
                // axios.get("/user/reg",{
                //     params : this.user
                // })
                // var p = new URLSearchParams();
                // for (let name in this.user) {
                //     p.append(name, this.user[name]);
                // }
                // axios.post("/user/reg", p).then(res=>{
                axios.post("/user/reg1", this.user).then(res=>{
                    console.info(res.data.data);
                    // 清空报错
                    this.errors = {};
                    if(res.data.code == 0){
                        for (let name in this.user) {
                            let msg = res.data.data
                                // 过滤
                                .filter(o=>o.field == name)
                                // 转换 object(map)数组 转为 string 数组
                                .map(o=>o.defaultMessage)
                                // js 数组函数 元素拼接 => string数组 => 字符串
                                .join(",");
                            if(msg){
                                this.errors[name] = msg;
                            }
                        }
                    } else {

                    }
                });
            },
            uploadFile(){
                let fd = new FormData();
                fd.append("abc", fileinput.files[0]);
                axios.post("/user/upload", fd).then(res=>{
                    if(res.data.code == 1){
                        this.user.head = res.data.data;
                    }
                });
            }
        }
    })
</script>


</body>
</html>